<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <title>主界面</title>
    <link rel="stylesheet" type="text/css" href="resources/js/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="resources/js/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="resources/css/sanke-mgr.css">
	<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="resources/js/jquery.easyui.min.js"></script>
	
	<script type="text/javascript">
			var index = 0;
			//创建tab
			function addPanel(title,url){
				index++;
				var tab = $("#mainTab").tabs("getTab",title);
				if(tab){
					$("#mainTab").tabs("select",title);
					return;
				}
				$('#mainTab').tabs('add',{
					title: title,
					href:url,
					height:'100%',
					closable: true
				});
			}
			
			//移除tab
			function removePanel(){
				var tab = $('#mainTab').tabs('getSelected');
				if (tab){
					var index = $('#mainTab').tabs('getTabIndex', tab);
					$('#mainTab').tabs('close', index);
				}
			}
	</script>
	
  </head>
  <body class="easyui-layout">
   <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">
   		<h2>XXX 管理系统</h2>
   </div>
	<div data-options="region:'west',split:true" title="导航" style="width:200px;">
		<div class="easyui-accordion" data-options="fit:true,border:false" >
				<div title="菜单一" style="padding:10px;" data-options="selected:true">
					<ul class="easyui-tree">
		                <li>
		                    <span>小菜单一</span>
		                    <ul>
		                        <li>
		                            <span>二级菜单</span>
		                            <ul>
		                                <li><a href="javascript:addPanel('二级菜单1','index.do')">二级菜单1</a></li>
		                                <li><a href="javascript:addPanel('二级菜单2','index.do')">二级菜单2</a></li>
		                            </ul>
		                        </li>
		                    </ul>
		                </li>
		                
		                <li>
		                	<span><a href="javascript:addPanel('小菜单二','index.do')">小菜单二</a></span>
		                </li>
		            </ul>
				</div>
				<div title="菜单二"  style="padding:10px;">
					<ul class="easyui-tree">
						<li>
							<span><a href="javascript:addPanel('测试','index.do')">测试</a></span>
						</li>
					</ul>
				</div>
				<div title="菜单三" style="padding:10px">
					<ul class="easyui-tree">
						<li>
							<span><a href="javascript:addPanel('测试','index.do')">测试</a></span>
						</li>
					</ul>
				</div>
			</div>
	
	</div>
	
	<div data-options="region:'south',border:true" style="height:25px;background:#A9FACD;padding:10px;" title="技术支持:xxx"></div>
	
	<div data-options="region:'center',tabWidth:112"  class="easyui-tabs" id="mainTab"></div>
	
  </body>
</html>